/* Welcome to Compass. Use this file to define print styles.
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" /> */
$fontsize:12px;
$fontsize:14px !default;
$padding:3px 5px 6px 7px;
$maps:(color:blue,bordercolor:yellow);
$className:main;
 body {
    $color:red !global;
    color: $color;
    font-size: $fontsize;
    padding: $padding;
    padding-left: nth($list: $padding, $n:1);
    background-color: map-get($map: $maps, $key: color);
}
.footter{
    color: $color;
}
.#{$className}{
    width: 500px;
    height: 200px;
}
//混合器的默认值设置
//混合器也可以试用其他参数传来的值使用，如下就使用了第一个形参的值来赋值
//如果需要传入数组型的多值参数，只需要将形参设置为$normal...就行
@mixin link-colors(
    $normal,
    $hover: blue,
    $visited: $normal
  ){
  color: $normal;
  &:hover { 
      color: $hover; 
    }
  &:visited {
       color: $visited; 
    }
}
//测试混合器
.testmixin{
    @include link-colors(red)
}
//通过选择器继承继承样式
.error {
    border: 1px solid red;
    background-color: #fdd;
  }
  .seriousError {
      /*只会将样式继承过来，不会讲选择器结构继承过来*/
    @extend .error;
    border-width: 3px;
  }
  //.seriousError不仅会继承.error自身的所有样式，
  //任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承，如下代码:
  //.seriousError从.error继承样式
.error a{  //应用到.seriousError a
    color: red;
    font-weight: 100;
  }
  h1.error { //应用到hl.seriousError
    font-size: 1.2rem;
  }